<template>
  <!-- 个人资料组件 -->
  <div class="my-collect">
    <div class="back-nav-box">
      <back-nav left-arrow left-text="返回" title="我的收藏 "></back-nav>
    </div>
    <!-- 图片 -->
    <div class="my-img">
      <img class="auto-img" :src="imgUrl" alt="">
    </div>
    <!-- 我的详情盒子 -->
    <div class="my-box">
        <div class="my-pro" v-for="(item,index) in collectArray"
        :key="index">
            <div class="product">
                <div class="product-img">
                <img class="auto-img" :src="item.smallImg" />
                </div>
                <div class="product-zh one-text">{{item.name}}</div>
                <div class="product-en one-text">{{item.enname}}</div>
                <div class="slot">
                    <div class="product-price">&yen;{{item.price}}</div>
                    <i class="fa fa-trash-o" aria-hidden="true" @click="deleteLike(item.pid,index)"></i>
                </div>
            </div>
        </div>
        <div v-if="flag">您还未收藏任何商品!</div>
    </div>
  </div>
</template>

<script>
import BackNav from "../components/BackNav.vue";
export default {
  name: "MyCollect",
  components: {
    BackNav,
  },
  data() {
    return {
        collectArray: [],
        flag:false,
        //背景
      imgUrl:require('../assets/images/orderbg.png'),
    };
  },
  created() {
      this.findAllLike();
  },
  methods: {
    //查询我的收藏
      findAllLike() {
          this.axios({
              method: 'get',
              url: '/findAllLike'
          }).then(res=>{
              // 
              //用户未登录时
                if(res.data.code==700) {
                    this.$toast(res.data.msg);
                    //跳转到登录页面 (注意将url加入js白名单中)
                   setTimeout(()=>{
                       this.$router.push({name:'Login'});
                   },2000);
                }
                //用户已登录
                if(res.data.code==2000) {
                    this.collectArray=res.data.result;
                    
                    
                }
          })
      },
      // 删除收藏
      deleteLike(pid,index) {
        this.collectArray.splice(index,1);
        this.axios({
          method: 'post',
          url: '/notlike',
          data : {
            pid
          }
        }).then(res=>{
          // 
          if(res.data.code==900) {
            this.$toast(res.data.msg);
          }
        })
        
      }
  },
};
</script>

<style lang='less' scoped>
@import url('../assets/base.less');

.my-collect {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
}
.back-nav-box {
  position: sticky;
  top: 0;
  color: @mainColor;
}

.my-img {
  width: 100%;
  height: 100px;
  background-color: @bg_Color;
}
.my-box {
  margin: 0 10px;
  padding: 10px;
  background-color: #fff;
  position: relative;
  top: -20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-wrap:wrap;
}
.my-pro {
    width:calc(~"33.3333% - 10px");
    margin-right: 10px;
    margin-bottom: 10px;
    &:nth-child(3n){
        margin-right: 0;
    }
}
.product-img {
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
}
.product-zh {
    font-size:14px;
    margin-top: 10px;
}
.product-en {
    color:#666;
    margin: 5px 0;
}
.product-price {
    font-weight:bold;
    color:@priceColor;
}
.slot {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color:#999;

}
</style>